<template>
	<div class="toolbar-link" ref="buttonRef">
		<i :class="'iconfont icon-contentright'" class="toolBar-icon"></i>
	</div>
	
	<el-popover ref="popoverRef" popper-class="function_content" :virtual-ref="buttonRef" trigger="click">
		<div class="function_box">
			<div class="function_header flx-align-center">
				<div class="function_title">Web Apps</div>
				<div class="function_btn">View All Apps<el-icon class="align-middle"><ArrowRight /></el-icon></div>
			</div>
			<div class="function_list">
				<el-row>
				    <el-col :span="8">
						<div class="dropdown-icon-item">
							<img src="" alt="" />
							<div class="dropdown-icon-name">Dribbble</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="dropdown-icon-item">
							<img src="" alt="" />
							<div class="dropdown-icon-name">Dribbble</div>
						</div>
					</el-col>   
					<el-col :span="8">
						<div class="dropdown-icon-item">
							<img src="" alt="" />
							<div class="dropdown-icon-name">Dribbble</div>
						</div>
					</el-col>
				</el-row>
				<el-row>
				    <el-col :span="8">
						<div class="dropdown-icon-item">
							<img src="" alt="" />
							<div class="dropdown-icon-name">Dribbble</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="dropdown-icon-item">
							<img src="" alt="" />
							<div class="dropdown-icon-name">Dribbble</div>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="dropdown-icon-item">
							<img src="" alt="" />
							<div class="dropdown-icon-name">Dribbble</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>	
	</el-popover>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	//import { ClickOutside as vClickOutside } from 'element-plus'
	const buttonRef = ref()
	const popoverRef = ref()
	// const onClickOutside = () => {
	// 	unref(popoverRef).popperRef?.delayHide?.()
	// }
</script>
<style lang="scss">
	.function_content{
		width: 320px !important;
		padding: 0 !important;
		.align-middle{
			vertical-align: middle!important;
			display: inline;
		}
	}
</style>
<style lang="scss" scoped>
	.function_box{
		.function_header{
			padding: 16px;
			border-bottom: 1px dashed var(--el-function-boder-color);
			.function_title{
				flex: 1;
				font-size: 16px;
				font-weight: 600;
			}
			.function_btn{
				margin: 0 12px;
				padding: 4px 8px;
				background-color: var(--el-color-primary-light-9);
				font-size: 14px;
				color: var(--el-color-primary);
				cursor: pointer;
				&:hover{
					background-color: var(--el-color-primary);
					color: #fff;
				}
			}
		}
		.function_list{
			padding: 8px;
			.dropdown-icon-item{
				padding: 15px 0 9px;
				border-radius: 3px;
				line-height: 34px;
				text-align: center;
				img{
					height: 24px;
					vertical-align: middle;
				}
				.dropdown-icon-name{
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				&:hover{
					background-color: var(--el-color-primary-light-8);
				}
			}
		}
	}
</style>